<form class="form-horizontal"
      ng-submit="$close(pin)"
      ng-controller="ModalPinCtrl">

  <div class="modal-header">
    <button type="button" class="close" title="{{ 'modal.pin.close' | translate }}"
            ng-click="$dismiss()">&times;</button>
    <h4 class="modal-title"
        ng-switch="type">
      <span ng-switch-when="PinMatrixRequestType_Current">
        {{ 'modal.pin.enter-current-pin' | translate }}<br>
        <small class="text-info" translate="modal.pin.look-at-device">Look at the device for number positions.</small>
      </span>
      <span ng-switch-when="PinMatrixRequestType_NewFirst">
        {{ 'modal.pin.enter-new-pin' | translate }}<br>
        <small class="text-info" translate="modal.pin.look-at-device">Look at the device for number positions.</small>
      </span>
      <span ng-switch-when="PinMatrixRequestType_NewSecond">
        {{ 'modal.pin.re-enter-new-pin' | translate }}<br>
        <small class="text-danger" translate="modal.pin.look-at-device-positions-changed">Note that the positions of numbers shown on the device have changed!</small>
      </span>
    </h4>
  </div>
  <div class="modal-body">
    <div class="pinmodal-dial">
      <div class="form-group">
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(7)">&#9679;</button>
        </span>
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(8)">&#9679;</button>
        </span>
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(9)">&#9679;</button>
        </span>
      </div>
      <div class="form-group">
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(4)">&#9679;</button>
        </span>
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(5)">&#9679;</button>
        </span>
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(6)">&#9679;</button>
        </span>
      </div>
      <div class="form-group">
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(1)">&#9679;</button>
        </span>
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(2)">&#9679;</button>
        </span>
        <span class="col-sm-4">
          <button type="button" class="btn btn-block btn-lg"
                  ng-click="addPin(3)">&#9679;</button>
        </span>
      </div>
    </div>
    <div class="form-group">
      <div class="pinmodal-pin">
        <div class="pinmodal-pin-value">
          {{pin|password}}
        </div>
        <button type="button" class="btn btn-link btn-back"
            ng-click="delPin()"
            ng-show="isPinSet()">
          <span class="arrow"></span>
          <span class="glyphicon glyphicon-remove"></span>
          <span class="sr-only">del</span>
        </button>
      </div>
      <input type="hidden" autocomplete="off" ng-model="pin">
      <div class="pinmodal-rating"
           ng-if="pin && type !== 'PinMatrixRequestType_Current'"
           ng-controller="DeviceCtrl"
           ng-switch="ratePin(pin)">
        <span ng-switch-when="long" class="text-danger" translate="modal.pin.rating-too-long">Too Long</span>
        <span ng-switch-when="weak" class="text-danger" translate="modal.pin.rating-weak">Weak</span>
        <span ng-switch-when="fine" class="text-warning" translate="modal.pin.rating-fine">Fine</span>
        <span ng-switch-when="strong" class="text-success" translate="modal.pin.rating-strong">Strong</span>
        <span ng-switch-when="ultimate" class="text-success" translate="modal.pin.rating-ultimate">Ultimate</span>
      </div>
    </div>

  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-primary btn-block btn-lg"
            ng-disabled="ratePin(pin) === 'long'" translate="modal.pin.enter">Enter</button>
    <br>
    <small class="text-muted" translate="modal.pin.help">Lost? Check our <a href="http://mybwallet.com/docs/faq/zh/bwallet_faq.html#pin" target="_blank">user manual</a>.</small>
  </div>


</form>
